<!--
 * @Author: wjc
 * @Date: 2025-09-11 15:56:11
 * @LastEditors: wjc
 * @LastEditTime: 2025-10-11 14:21:57
 * @Description: 
-->
<template>
  <div>
    <NiceTooltip :disabled="!shouldOnHover" side="bottom">
      <template #trigger>
        <ThemeButton :model-value="isDark" type="icon" @update:model-value="onChangeTheme" />
      </template>
    </NiceTooltip>
  </div>
</template>

<script lang="ts" setup>
  import { useUserStore } from '#/stores/modules'
  import { NiceTooltip } from '@nice/nice-ui'
  import { useColorMode } from '@vueuse/core'

  import ThemeButton from './components/theme-button.vue'

  defineOptions({
    name: 'LayoutTheme',
  })

  withDefaults(defineProps<{ shouldOnHover?: boolean }>(), {
    shouldOnHover: false,
  })

  // 初始化主题模式
  const mode = useColorMode()
  const userStore = useUserStore()
  const isDark = ref<boolean>(userStore.preferences.theme.mode === 'dark')
  const onChangeTheme = (value: boolean | undefined) => {
    userStore.preferences.theme.mode = value ? 'dark' : 'light'
    mode.value = value ? 'dark' : 'light'
    isDark.value = !isDark.value
  }
</script>
